<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>用户登录界面</title>
    
    <meta charset="utf-8"/>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" href="gold/css/jq22.css">
	<link rel="stylesheet" href="gold/css/bootstrap.min.css">
	<link rel="stylesheet" href="gold/css/bootstrap.css">
	<style type="text/css">
		#msg2{
			color:red;
		}
		#login{
			height:0px;
		}
		#msg{
			color:red;
			text-align: center;
		}
	</style>

  </head>
  
  <body>
    <div id="login">
	    <div class="wrapper">
	        <div class="login">
	            <form method="post" class="container offset1 loginform" action="userLogin.do">
	                <div id="owl-login">
	                    <div class="hand"></div>
	                    <div class="hand hand-r"></div>
	                    <div class="arms">
	                        <div class="arm"></div>
	                        <div class="arm arm-r"></div>
	                    </div>
	                </div>
	                <div class="pad">
	                    <div class="control-group">
	                        <div class="controls text-center">
	                            <h4>游币客户登录</h4>
	                        </div>
	                    </div>
	                    <div class="control-group">
	                        &nbsp;
	                    </div>
	                    <div class="control-group">
	                        <div class="controls">
	                            <label for="userName" id="nameMsg" class="glyphicon glyphicon-user"></label>
	                            <input id="userName" type="text" name="userName" placeholder="用户名" required="required"  tabindex="1" autofocus="autofocus" class="form-control input-medium">
	                        </div>
	                    </div>
	                    <div class="control-group">
	                        <div class="controls">
	                            <label for="userPwd" id="userPwdMsg" class="glyphicon glyphicon-th"></label>
	                            <input id="userPwd" type="password" name="userPwd" required="required" placeholder="密码(4-16个字符)" tabindex="2" class="form-control input-medium">
	                        </div>
	                    </div>
			   			<div class="control-group" id="msg">
	                        &nbsp;
	                    </div>
	                </div>
	                <div class="form-actions">
	               		<a href="gold/user/register.jsp" tabindex="4" class="btn-link"  style="color:black;font-size:10px">新用户注册</a>
	                    <button id="submit" type="submit" tabindex="3"  class="btn btn-primary" >用户登录</button>
	                    <button tabindex="6" class="btn" onclick="guestLogin()">游客登录</button>
	                	<a href="gold/user/forgetPwd.jsp" tabindex="5" class="btn btn-link text-muted" style="color:black;font-size:10px">忘记密码?</a>
	                </div>
	            </form>
	        </div>
	    </div>
	</div>
	<script type="text/javascript" src="gold/js/canvas-particle2.js"></script>
	<script type="text/javascript" src="gold/js/jquery.min.js"></script>
    
    <script type="text/javascript">
		window.onload = function(){
			var config = {
				vx: 4,
				vy:  4,
				height: 2,
				width: 2,
				count: 300,
				color: "121, 162, 185",
				stroke: "178, 34, 34",
				dist: 5000,
				e_dist: 30000,
				max_conn: 10
			};
			CanvasParticle2(config);
		};
		
	</script>
    <script type="text/javascript">
	    $(function() {
	        $('#login #userPwd').focus(function() {
	            $('#owl-login').addClass('password');
	        }).blur(function() {
	            $('#owl-login').removeClass('password');
	        });
	    });
    </script>
    <script type="text/javascript">
    	var v1 = false;
    	var v2 = false;
    	
    	$("#userName").focusout(function(){
    		v1=false;
    		$.ajax({
    			url:"getAllUser.do",
    			type:"post",
    			data:{"userName":$("#userName").val()},
    			dateType:"json",
    			success:function(result){
    				$("#msg").text(result.msg);
    				if(result.check==true){
    					v1=true;
    				}
    			}
    		});
    	});
    	
    	
    	$("#userPwd").focusout(function(){
	    	v2=false;
    		var pwd = $(this).val();
    		if(pwd.length<4){
	    		$("#msg").text("密码长度至少为4位");
    		}else if(pwd.length>16){
	    		$("#msg").text("密码长度至多为16位");
    		}else{
    			v2=true;
    		}
    	});
    	
    	
    	$("form").submit(function(){
    		return v1&&v2;
    	});
    	
    	function guestLogin(){
    		location.href="guestLogin.do";
    	}
    </script>
    <c:if test="${msg!=null}">
  		<script type="text/javascript">
  			alert("${msg}");
  		</script>
  	</c:if>
  </body>
  	
</html>
